<template>
  <!--  公益捐物页面-->
  <div id="top">
    <div>
      <el-card id="search">
        <el-input v-model="dname" placeholder="请输入姓名"></el-input>
        <el-button type="primary" plain @click="doQury()">查询</el-button>
        <el-button type="danger" plain @click="doshenhe()">审核</el-button>
        <el-button type="danger" plain @click="dontPass()">查看未通过</el-button>
      </el-card>
    </div>
    <el-table :data="currentPageData" stripe style="width: 100%">
      <el-table-column prop="dname" label="姓名" width="420"/>
      <el-table-column prop="dphone" label="手机号" width="420"/>
<!--      <el-table-column prop="dposition" label="地址" width="250"/>-->
      <el-table-column prop="dfetchdata" label="上门时间" width="500"/>
      <el-table-column fixed="right" label="操作" width="380">
        <template #default="scope">
          <el-popconfirm title="你确定要删除此捐赠信息吗?" @confirm="del(scope.row)">
            <template #reference>
              <el-button link type="primary" size="small" v-show="bangzhu">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="primary" size="small" v-show="shenhe" @click="viewLook(scope.row)">
            查看详情
          </el-button>
          <el-button link type="primary" size="small" v-show="shenhe" @click="viewPass(scope.row)">
            通过
          </el-button>
          <el-button link type="primary" size="small" v-show="shenhe" @click="viewDont(scope.row)">
            不通过
          </el-button>
          <div v-show="wtg">未通过</div>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页组件-->
    <el-pagination
        v-model="currentPage"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalData.length"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>

  <!--审核查看-->
  <el-dialog
      v-model="dialogVisibleshenhe"
      title="求助详情"
      width="800px"
      :before-close="handleClose">
    <table style="width: 600px">
      <tr>
        <td style="height: 35px;width: 90px">物品名：</td>
        <td>{{ goods.dtitle }}</td>
      </tr>

      <tr>
        <td style="height: 50px;width: 90px">捐赠人姓名：</td>
        <td>{{ goods.dname }}</td>
      </tr>

      <tr>
        <td style="height: 35px;width: 90px">手机号：</td>
        <td>{{ goods.dphone }}</td>
      </tr>
      <tr>
        <td style="height: 35px;width: 90px">地址：</td>
        <td>
          <p>{{ realAdd }}</p>
          <div class="drawStation">
            <div id="draw-station-container">

            </div>
          </div>
        </td>
      </tr>
    </table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleshenhe=false">取消</el-button>
        <el-button type="primary" @click="dialogVisibleshenhe=false">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
import doThis from "@/api/getData";
import axios from "axios";
import * as AMapLoader from "@amap/amap-jsapi-loader";
import {ElMessage} from "element-plus";


export default {
  name: "DonateList",
  data() {
    return {
      goodsList: [],
      goods: {},
      dname: '',
      shenhe: false,
      bangzhu: true,
      dialogVisibleshenhe: false,
      wtg:false,
      //  分页
      tableData: [], // 总数据
      totalData: [], // 总数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的条数

      // 地图对象
      // 地图实例对象
      map: null,
      // 标点对象
      marker: null,
      realAdd: null,
    }
  },

  computed: {
    // 根据当前页面和每页显示的条数，计算分页后的数据
    currentPageData() {
      const {currentPage, pageSize} = this;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      let aaa = new Array('a', 'b', 'c')
      console.log(aaa)
      let bbb = aaa.slice(0, 2)
      console.log(bbb, start, end)

      let arr = JSON.parse(JSON.stringify(this.totalData))
      console.log(arr)
      return arr.slice(0, 8);
    },
  },
  mounted() {
    this.getGoodList()

  },
  methods: {
    initMap(x,y) {
      AMapLoader.load({
        key: '105771500d5f91b00104a0d28ea72c41', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
          .then((AMap) => {
            this.map = new AMap.Map("draw-station-container", {
              resizeEnable: true,
              //设置地图容器id
              viewMode: "3D", //是否为3D地图模式
              zoom: 15, //初始化地图级别
              center: [x,y], //初始化地图中心点位置
              // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
            })
            // 地图点击事件
            new AMap.Marker({
              map: this.map,
              position: [x,y],
            })
          })
      axios.get("https://restapi.amap.com/v3/geocode/regeo", {
        params: {
          output: 'json',
          location: x+','+y,
          key: 'f5e5504bd7700d7045245f8b7ca45b29',
          radius: '1000',
          extensions: 'all'
        }
      }).then(res => {
        this.realAdd = res.data.regeocode.formatted_address
      })
    },
/*    setPost() {
      for (let i = 0; i < this.totalData.length; i++) {
        axios.get("https://restapi.amap.com/v3/geocode/regeo", {
          params: {
            output: 'json',
            location: this.totalData[i].dposition,
            key: 'f5e5504bd7700d7045245f8b7ca45b29',
            radius: '1000',
            extensions: 'all'
          }
        }).then(res => {
          if (res.data.status === '1') {
            this.totalData[i].dposition = res.data.regeocode.formatted_address
          }
        })
      }
    },*/
    // 切换页码时的回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
    }
    ,
    //查询审核通过的捐赠
    getGoodList() {
      doThis.doGet("/Donategoods/list", {dstatus: 2}).then(res => {
        console.log('res====5555===', res)
        // this.goodsList=res.data
        this.tableData = res.data
        this.totalData = res.data
      })
    }
    ,
    //删除捐赠
    del(row) {
      doThis.doGet("/Donategoods/delete", {did: row.did}).then(res => {
        console.log(res)
        this.getGoodList()
      })
    }
    ,
    //搜索
    doQury() {
      doThis.doGet("/Donategoods/list", {dname: this.dname,dstatus: 2}).then(res => {
        console.log(res)
        // this.goodsList=res.data
        this.wtg=false
        this.shenhe=false
        this.bangzhu=true
        this.tableData = res.data
        this.totalData = res.data
      })
    }
    ,
    subNews() {
      doThis.doGet("/news/insert", this.news).then(res => {
        // alert(res.msg)
        if (res.code === "0") {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
          this.reset()
        }else {
          ElMessage.error(res.msg)
        }

      })
    }
    ,
    reset() {
      this.news = {
        ndetail: '',
        nsubhead: '',
        ntitle: '',
        nid: ''
      }
    }
    ,
    //待审核页面
    doshenhe() {
      doThis.doGet("/Donategoods/list", {dstatus: 1}).then(res => {
        console.log("审核页面-----", res)
        this.wtg=false
        this.shenhe = true
        this.bangzhu = false
        this.tableData = res.data
        this.totalData = res.data

      })
    }
    ,
    //通过
    viewPass(row) {
      if (confirm("确定要通过吗")) {
        doThis.doGet("/Donategoods/update", {did: row.did, dstatus: 2}).then(res => {
          console.log("通过----", res)
          // this.tableData = res.data
          // this.totalData = res.data
          this.getGoodList()
        })
      }
    }
    ,
    //不通过
    viewDont(row) {
      if (confirm("确定要不通过吗")) {
        doThis.doGet("/Donategoods/update", {did: row.did, dstatus: 6}).then(res => {
          console.log("不通过----", res.data)
          // this.tableData = res.data
          // this.totalData = res.data
          this.getGoodList()
        })
      }
    }
    ,
    //查看待审核的详情
    viewLook(row) {
      this.goods = row
      // this.getHelpList(row.aid)
      this.dialogVisibleshenhe = true
      this.initMap(parseFloat(row.dposition.split(',')[0]), parseFloat(row.dposition.split(',')[1]))
    },
    //查看未通过
    dontPass(){
      doThis.doGet("/Donategoods/list", {dstatus: 6}).then(res => {
        console.log("审核页面-----", res)
        this.wtg=true
        this.shenhe = false
        this.bangzhu = false
        this.tableData = res.data
        this.totalData = res.data
      })
    }
  },
  beforeUnmount() {
 /*   this.map = null
    this.marker = null*/
  }
}
</script>

<style scoped>
#top {
  margin-top: 47px;
  margin-left: -30px;
  background-color: #EBEBEB;
}

#search .el-input {
  width: 200px;
  margin-left: 30px;
  margin-right: 30px;
}

#search .el-button {
  margin-left: 30px;
  margin-right: 30px;
}
.drawStation #draw-station-container {
  padding: 0;
  /* margin: 20px 0 20px 0; */
  margin: 50px auto;
  width: 500px;
  height: 300px;
}
</style>